<template>
	<view class="pageItem">
		<view class="main">
			<view class="p_title">{{$t('share.share_title')}}</view>
			<view class="bg_img_item">
				<view class="tit">{{$t('use.invitation_code')}}</view>
				<view class="code">{{userInfo.ewm_code}}</view>
				<view class="copy">{{$t('use.copy')}}</view>
				<view class="btn share_btn" @click="shareFun">{{$t('share.share_btn')}}</view>
				<view class="btn posters_btn" @click="posterMaskChange(true)">{{$t('share.share_posters')}}</view>
				<image class="bg" src="/static/img/share_bg.png"></image>
			</view>
			<view class="card team_item" @click="$gotopage" data-url="/pages/my/team">
				<view class="c_txt">{{$t('team.team_number')}}</view>
				<view class="c_num">{{info.team_num}}</view>
				<view class="iconfont icon">&#xe70f;</view>
			</view>
			<view class="card tips_item">
				<view class="c_tit">
					<view class="txt">{{$t('share.share_remark')}}</view>
				</view>
				<view class="remark">{{info.share_desc}}</view>
			</view>
		</view>

		<view class="mask" :class="p_mask ? 'mask_active':''">
			<view class="mask_item">
				<view class="mask_box mask_box_poster" :class="p_mask ? 'mask_box_active_center':''">
					<image class="m_img" :style="posters ? 'background: none':''" :src="posters" mode="widthFix"></image>
					<view class="f_btn">
						<!-- #ifdef APP -->
						<view class="btn" @click="saveFun" v-if="posters">{{$t('share.save_posters')}}</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="btn btn2" v-if="posters">{{$t('share.save_posters_h5')}}</view>
						<!-- #endif -->
						<view class="iconfont back_icon" @click="posterMaskChange(false)">&#xe616;</view>
					</view>
				</view>
			</view>
		</view>
		
		<canvas canvas-id="mycanvas" style="width: 62.6vw;height: 89vw;position: fixed;z-index: 1;top: 0;" v-show="canvasShow"></canvas>
		<canvas  canvas-id="canvas" id="qr_canvas" style="width:36vw; height:36vw;margin-top: 10rpx;"></canvas>
							
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import qrcode from '@/common/wxqrcode.js'
	export default {
		data() {
			return {
				loading : 0,
				// 二维码绘制对象
				qrcode        : null,
				// 二维码尺寸，单位 rpx
				qrcodeSize    : 250,
				// 二维码背景颜色
				qrcodeBgColor : '#FFFFFF',
				// 二维码颜色
				qrcodeColor   : '#000000',
				// 画布 id
				qrcodeId      : 'qr_canvas',
				
				share_link:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload',
				info : {
					share_link:'',
					team_num : '',
					share_desc : '这里是传过来的分享规则'
				},
				p_mask:false,
				posters:'',
				canvasShow: true,
				share_img_bg:'/static/img/poster_bg.png',
				wechat_qr_img:'',
				appLocale: '',
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.appLocale = uni.getLocale();
			this.initData();
		},
		methods:{
			initData(){
				let url = this.site_url + 'api/auth/index/share_init';
				this.areq(url).then(res=>{
					if(res.code == 1){
						 this.info = res.data;
						 this.info.share_link += '?code='+this.userInfo.ewm_code;
						this.create_qrcode();
					}
				})
			},
			create_qrcode(){
				let share_text = this.info.share_link;
				this.wechat_qr_img = qrcode.createQrCodeImg(share_text)
			},
			shareFun(){
				let that = this;
				uni.showModal({
					title: this.$t('popular.link_promotion'),
					content: this.info.share_link,
					cancelText: this.$t('use.close'),
					confirmText: this.$t('use.copy'),
					confirmColor: '#ff5061',
					success(res) {
						if (res.confirm) {
							uni.setClipboardData({
								data: that.info.share_link,
								success(e) {
									uni.showToast({
										icon: 'success',
										title:''
									})
								}
							})
						}
					}
				})
			},
			saveFun(){
				uni.saveImageToPhotosAlbum({
					filePath:this.posters,
					success(res) {
						uni.showToast({
							icon:'success'
						})
					}
				})
			},
			posterMaskChange(_flag){
				let that = this;
				this.p_mask = _flag;
				if(_flag){
					if(this.posters){
						return
					}else{
						uni.showLoading({
							mask:true
						})
						setTimeout(function(){
							that.posterImg();
						},1500)
					}
				}
			},
			posterImg() {
				
				uni.canvasToTempFilePath({
						x          : 0,
						y          : 0,
						width      : uni.upx2px(this.qrcodeSize),
						height     : uni.upx2px(this.qrcodeSize),
						destWidth  : uni.upx2px(this.qrcodeSize),
						destHeight : uni.upx2px(this.qrcodeSize),
						canvasId   : this.qrcodeId,
						success: (res) => {
							 //res.tempFilePath,
							 console.log(1111)
							 console.log(res)
						},
						fail :(err) =>{
							console.log(2222)
							console.log(err)
						}
				  });
				
				this.canvasShow = true;
				let that = this;
				let ctx = uni.createCanvasContext('mycanvas');
				let w = 0;
				let h = 0;
				uni.getSystemInfo({
				    success:  (res) => {
				        w = res.windowWidth*0.626;
				        h = w*1.4217.toFixed(2)
						//居中数据
						let qr_x = Number((w*0.5)*0.5.toFixed(2));
						let qr_y = Number((0.81*h - w*0.5).toFixed(2));
						//背景
						ctx.drawImage(that.share_img_bg, 0, 0, w, h);
						//绘制二维码位置
						 ctx.drawImage(that.wechat_qr_img, qr_x, qr_y, w*0.5, w*0.5);
						//绘制头部文字
						if(that.appLocale == 'zh-Hant'){
							ctx.font = `bold 26px Arial`;//绘制文字
							ctx.fillStyle = '#fff';
							ctx.textAlign = 'center';
							ctx.fillText(that.$t('share.posters_title'),0.5*w,0.18*h);
						}else if(that.appLocale == 'en'){
							ctx.font = `bold 22px Arial`;//绘制文字
							ctx.fillStyle = '#fff';
							ctx.textAlign = 'center';
							ctx.fillText(that.$t('share.posters_title'),0.5*w,0.12*h);
							ctx.fillText(that.$t('share.posters_title2'),0.5*w,0.21*h);
						}else if(that.appLocale == 'jp'){
							ctx.font = `bold 25px Arial`;//绘制文字
							ctx.fillStyle = '#fff';
							ctx.textAlign = 'center';
							ctx.fillText(that.$t('share.posters_title'),0.5*w,0.12*h);
							ctx.fillText(that.$t('share.posters_title2'),0.5*w,0.21*h);
						}
						//绘制分享规则文字2
						ctx.font = `bold 12px Arial`;//绘制文字
						ctx.fillStyle = '#A14715';
						ctx.textAlign = 'center';
						ctx.fillText(that.$t('share.qr_code_title'),0.5*w,0.4*h);
						
						//启用绘制
						ctx.draw(true,()=>{
							that.canvasShow = false;
							uni.canvasToTempFilePath({
								canvasId: 'mycanvas',
								success: (res_d1) => {
									//console.log(res_d1)
									uni.hideLoading();
									that.posters = res_d1.tempFilePath;
								  },
								fail: () => {
									uni.hideLoading();
									uni.showToast({
										duration: 2000 ,
										icon:'error'
									});
								}
							});
						}); 
						//结束绘画
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FEE4BF;
}
.bg_item {
	@include bg_item(90vw,#FE0358,#FEE4BF);
}
.main{
	width: 100%;
	padding: 3vw 4% 0;
	position: relative;
	z-index: 2;
	.p_title{
		width: 80%;
		margin-left: 10%;
		font-size: 8vw;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}
	.bg_img_item{
		position: relative;
		width: 80%;
		height: 82vw;
		margin-left: 10%;
		margin-top: 6vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tit{
			width: 43%;
			height: 6.5vw;
			line-height: 6.5vw;
			font-size: 3.5vw;
			font-weight: bold;
			color: #AE6200;
			position: relative;
			z-index: 3;
			text-align: center;
		}
		.code{
			height: 11vw;
			line-height: 11vw;
			font-size: 8vw;
			letter-spacing: 2rpx;
			font-weight: bold;
			color: #F90400;
			position: relative;
			z-index: 3;
			text-align: center;
			margin-top: 4vw;
		}
		.copy{
			font-size: 3.5vw;
			border: 1rpx solid #AF5828;
			color: #AF5828;
			border-radius: 4vw;
			padding: 1vw 3vw;
			position: relative;
			z-index: 3;
			text-align: center;
			margin-top: 2vw;
			background: #fff;
		}
		.btn{
			position: relative;
			z-index: 3;
			text-align: center;
			width: 70%;
			height: 11vw;
			line-height: 11vw;
			border-radius: 6vw;
			font-size: 4vw;
			font-weight: bold;
		}
		.share_btn{
			margin-top: 18vw;
			background: linear-gradient(90deg, #FFCF87 0%, #FEEDCF 100%);
			color: #E30000;
		}
		.posters_btn{
			margin-top: 3vw;
			background: #FF3031;
			color: #FFFADD;
			border: 1rpx solid #FFFADD;
		}
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 82vw;
			z-index: 2;
		}
	}
	.card{
		@include card_style();
		margin-top: 4vw;
		background: #fff;
	}
	.team_item{
		background: linear-gradient(90deg, #FF3748 0%, #FB3E38 100%);
		display: flex;
		align-items: center;
		color: #FFD163;
		font-weight: bold;
		font-size: 4vw;
		margin-top: 8vw;
		.c_num{
			flex: 1;
			font-size: 6vw;
			padding: 0 5vw;
		}
		.icon{
			font-size: 4vw;
		}
	}
	.tips_item{
		.c_tit{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			.txt{
				font-size: 3.8vw;
				padding: 0 5vw;
				position: relative;
				color: #AE6200;
				font-weight: bold;
				&::before{
					content: '';
					position: absolute;
					width: 5vw;
					height: 1rpx;
					background: #AE6200;
					top: 50%;
					transform: translateY(-50%);
					left: -5vw;
				}
				&::after{
					content: '';
					position: absolute;
					width: 5vw;
					height: 1rpx;
					background: #AE6200;
					top: 50%;
					transform: translateY(-50%);
					right: -5vw;
				}
			}
		}
		.remark{
			width: 100%;
			margin-top: 4vw;
			font-size: 3vw;
			color: #999;
		}
	}
}
@include animation_mask_style();
.mask{
	.mask_item{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 10vw;
	}
	.mask_box_poster{
		width: 62.6vw;
		position: relative;
		border-radius: 3vw;
		padding: 0 !important;
		border: none;
		.m_img{
			width: 100%;
			min-height: 89vw;
			background: $main_bg_color;
			border-radius: 3vw;
		}
		.f_btn{
			width: 100%;
			position: absolute;
			bottom: -30vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.btn{
				width: 50vw;
				height: 11vw;
				background: $main_color;
				color: #ffffff;
				font-size: 4vw;
				line-height: 11vw;
				text-align: center;
				border-radius: 6vw;
			}
			.btn2{
				width: 80vw;
				background: none;
			}
			.back_icon{
				margin-top: 5vw;
				font-size: 9vw;
				color: #ffffff;
			}
		}
		.icon{
			left: calc(50% - 4vw);
			position: absolute;
			bottom: -35vw;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333333;
			width: 8vw;
			height: 8vw;
			background: #ffffff;
			border-radius: 50%;
			font-size: 5vw;
		}
	}
}
</style>
